<template>
    <div id="comment-item">
        <img src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" alt=""
            srcset="">
        <div class="text">
            <div class="avatar-time">
                <span>壹壹的快力</span>
                <span>2023/2/23 23:22:21</span>
            </div>
            <div class="content">
                顺口溜的解放路口书法拉克积分拉书法家阿里客服垃圾分类看到发令肌肤啦附件拉风
            </div>
            <div class="board">
                <span class="like">
                    <el-tooltip class="box-item" effect="dark" content="喜欢" placement="top-start">
                        <el-badge :value="1" class="item" type="primary">
                            <el-icon>
                                <Star />
                            </el-icon>
                        </el-badge>
                    </el-tooltip>
                </span>
                <span class="reply">

                    <el-tooltip class="box-item" effect="dark" content="回复" placement="top-start">
                        <el-icon>
                            <ChatDotSquare />
                        </el-icon>
                    </el-tooltip>
                </span>
            </div>
            <!-- 回复评论开始 -->
            <ReplyCommentItem></ReplyCommentItem>
            <!-- 回复评论结束 -->
        </div>
    </div>
</template>

<script setup>
import ReplyCommentItem from "./ReplyCommentItem.vue"
import { Star, ChatDotSquare } from "@element-plus/icons-vue"
</script>

<style  scoped>
#comment-item {
    width: 100%;
    margin: 15px 0;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: flex-start;
}

#comment-item img {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 20px;
}

#comment-item .text .avatar-time :first-child {
    font-weight: bolder;
    font-size: 18px;
}

#comment-item .text .avatar-time :last-child {
    font-size: 12px;
    margin-left: 10px;
}

#comment-item .text .content {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 15px;
}

#comment-item .text .board{
    float: right;
    cursor: pointer;
}

#comment-item .text .board .like {
    margin-right: 10px;
}
</style>